<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="x-rim-auto-match" content="none">
    <link rel="stylesheet" href="reset.css"/>
    <link rel="stylesheet" href="iconfont.css">
    <link rel="stylesheet" href="share.css"/>
    <link rel="stylesheet" href="swiper.css"/>
    <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>分享外链</title>
    <style>
        .swiper-container{
            overflow: inherit;!important;
        }
        .layui-m-layerchild{
            background: none!important;
            box-shadow: none!important
        }
        .layui-m-layercont{
            padding: 0!important
        }
        .layui-m-layercont img{
            width: 15rem;
            height: 5.32rem;
            position: absolute;
            left: -1rem;
            bottom: -7rem;
        }
    </style>
</head>
<body>
<div class="shareBox">
    <!--title-->
    <div class="greenBg">
        <img src="fenlogo.png" alt=""/>
        <h4>慧分类惠生活</h4>
    </div>
    <!--info-->
    <div class="infoBox">
        <h4>公司简介</h4>
        <h5>Company profile </h5>
        <hr/>
        <p>南京志达环保科技有限公司是一家专注于垃圾分类、打造城市生活垃圾全新产业链的环保企业。秉承慧分类、慧生活的环保理念，以推动垃圾分类事业为使命，致力于构建一套系统垃圾处理与分类服务的城市生活垃圾运营系统，创造全新垃圾分类理念——慧分类、慧生活。志达环保以最先进的环保理念，最落地的垃圾分类回收方案，为政府提供城市生活垃圾分类、垃圾智能回收等全套运营解决方案。</p>
    </div>
    <!--swiper-->
    <!-- Swiper -->
    <div id="swiperBox">
        <div class="swipertitle clearfix"><span>热点新闻</span><a class="more" href="#">更多<i class="icon iconfont icon-youjiantou"></i></a></div>
        <div class="swiper-container show-swiper swiper-container-horizontal swiper-container-ios">
            <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(37px, 0px, 0px);">
                <div class="swiper-slide swiper-slide-active" style="margin-right: 17px;">
                    <div class="goods" style="transform: scale3d(1.1, 1.1, 1); transition-duration: 0ms;">
                        <div class="c-top">
                            <div class="img"><img src="photos.jpg" width="100%"></div>
                        </div>
                        <div class="detail">
                            <h2>好物推荐：多功能导热奶油刀</h2>
                            <p>一把可以切水果、涂抹果酱的多功能刀具让你的生活从此变得简单</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-next" style="margin-right: 17px;">
                    <div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms;">
                        <a href="#">
                            <div class="c-top">
                                <div class="img"><img src="photos.jpg" width="100%"></div>
                            </div>
                            <div class="detail">
                                <h2>好物推荐：多功能导热奶油刀</h2>
                                <p>一把可以切水果、涂抹果酱的多功能刀具让你的生活从此变得简单</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide" style="margin-right: 17px;">
                    <div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms;">
                        <a href="#">
                            <div class="c-top">
                                <div class="img"><img src="photos.jpg" width="100%"></div>
                            </div>
                            <div class="detail">
                                <h2>好物推荐：多功能导热奶油刀</h2>
                                <p>一把可以切水果、涂抹果酱的多功能刀具让你的生活从此变得简单</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide" style="margin-right: 17px;">
                    <div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms;">
                        <a href="#">
                            <div class="c-top">
                                <div class="img"><img src="photos.jpg" width="100%"></div>
                            </div>
                            <div class="detail">
                                <h2>好物推荐：多功能导热奶油刀</h2>
                                <p>一把可以切水果、涂抹果酱的多功能刀具让你的生活从此变得简单</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-slide" style="margin-right: 17px;">
                    <div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms;">
                        <a href="#">
                            <div class="c-top">
                                <div class="img"><img src="photos.jpg" width="100%"></div>
                            </div>
                            <div class="detail">
                                <h2>好物推荐：多功能导热奶油刀</h2>
                                <p>一把可以切水果、涂抹果酱的多功能刀具让你的生活从此变得简单</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-container bg-swiper swiper-no-swiping swiper-container-fade swiper-container-horizontal swiper-container-ios">
        </div>
    </div>
    <!--footer-->
    <div class="footer clearfix">
        <a href="#dingbu">
            <div class="imgBox clearfix">
                <p></p>
                <img src="erweima.png" alt=""/>
            </div>
            <div class="textBox">
                <p class="tell">咨询电话<br/>4001865860</p>
                <p>合作单位：南京市城管局<br/>服务提供商：南京志达环保科技有限公司</p>
            </div>
        </a>
    </div>
</div>
    <script src="layer.js" type="text/javascript"></script>
    <script src="swiper.js" type="text/javascript"></script>
    <script>
        $(function () {
            //点击关注
            $("#swiperBox").on("click",".more",function(){
                var html = '';
                html+='<img class="tip" src="share.png" alt=""/>';
                layer.open({
                    content: html
                });
                $("body").addClass("fixed");
                $(".footer .imgBox img").addClass("open")
            });
            //关闭弹窗
            $(document).on("click",".layui-m-layershade",function(){
                $("body").removeClass("fixed");
                $(".footer .imgBox img").removeClass("open")
            });
            //热点新闻
            var swiperBg = new Swiper(".bg-swiper", {
                        effect: "fade",
                        fadeEffect: {
                            crossFade: !1
                        }
                    }),
                    swiperShow = new Swiper(".show-swiper", {
                        slidesPerView: "auto",
                        watchSlidesProgress: !0,
                        slidesOffsetBefore: 0, /*起始位置*/
                        spaceBetween: 20,
                            loop : true,
                        //slidesPerView: 3,//可见个数2
                        centeredSlides: true,//居中
                        initialSlide: 1,//用来设定页面加载完成时，第几张图片先显示出来
                        resistanceRatio: 1,
                        controller: {
                            control: swiperBg
                        },
                        on: {
                            progress: function (b) {
                                for (i = 0; i < this.slides.length; i++)slide = this.slides.eq(i),
                                        slideProgress = this.slides[i].progress,
                                        prevIndent = 4 == i ? .3228 : .0898,
                                        scale = 1 > Math.abs(slideProgress + prevIndent) ? .1 * (1 - Math.abs(slideProgress + prevIndent)) + 1 : 1.,
                                        slide.find(".goods").transform("scale3d(" + scale + "," + scale + ",1)");
                            },
                            setTransition: function (b) {
                                for (var a = 0; a < this.slides.length; a++) this.slides.eq(a).find(".goods").transition(b)
                            },
                            touchMove: function () {
                                this.controller.control = .01 > this.progress ? "" : swiperBg
                            },
                            touchEnd: function () {
                                - 8000 > this.translate && alert("\u8df3\u8f6c")/*最大距离提示*/

                            }
                        }
                    });
        })
    </script>
</body>
</html>